<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>index</title>

    <!-- font-icon -->
    <link rel="stylesheet" href="${ctxFrontStatic }/libs/font-welkin/css/iconfont.css">
    <!-- bootstrap-core -->
    <link rel="stylesheet" href="${ctxFrontStatic }/libs/bootstrap/v3.3.7/css/bootstrap.min.css">

    <!-- plugins -->
    <link rel="stylesheet" href="${ctxFrontStatic }/libs/bootstrap-table/v1.11.0/bootstrap-table.min.css">
    <link rel="stylesheet" href="${ctxFrontStatic }/libs/bootstrap-validator/css/bootstrapValidator.css">
    <link rel="stylesheet" href="${ctxFrontStatic }/libs/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">

    <link rel="stylesheet" href="${ctxFrontStatic }/style/welkin.css">
    <link rel="stylesheet" href="${ctxFrontStatic }/style/header.css">
    <link rel="stylesheet" href="${ctxFrontStatic }/style/app.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="${ctxFrontStatic }/libs/html5shiv.min.js"></script>
    <script src="${ctxFrontStatic }/libs/respond.min.js"></script>
    <![endif]-->


</head>
<body>
<section class="main" style="padding-top: 20px">
    <div class="container-fluid ">

        <div class="wlk-top">
            <div class="row">
                <div class="col-sm-2">
                    <img src="${ctxFrontStatic }/images/address-book.png" alt=""/>
                </div>
                <div class="col-sm-3" style="margin-left: -29px;">
                    <p class="p-title">开票记录</p>
                    <p class="p-en">Invoice Details</p>
                </div>
            </div>
        </div>

        <div class="wlk-bottom">
            <div class="invoice-cont">
                <div class="row top-banner">
                    <div class="col-sm-8 ">
                        <lable>
                            <span class="sort-text">排序方式</span>
                        </lable>

                        <button class="btn btn-xs btn-default flag">按时间</button>
                        <button class="btn btn-xs btn-default flag">按金额</button>
                    </div>
                    <div class=" col-sm-8">
                        <lable>
                            <span class="time-text col-sm-6">申请时间</span>
                        </lable>
                        <div class="col-sm-12">
                            <input class="form-control " placeholder="请选择日期" id="datetimepicker-one">
                            <img src="${ctxFrontStatic }/images/calendar.png" class="inp-img"/>
                        </div>
                    </div>
                    <div class="col-sm-5">
                        <input class="form-control" placeholder="请输入关键词搜索">
                        <img src="${ctxFrontStatic }/images/search.png" class="inp-img"/>
                    </div>


                </div>
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>申请时间</th>
                        <th>发票金额</th>
                        <th>发票类型</th>
                        <th>发票号</th>
                        <th>状态</th>
                        <th>快递公司</th>
                        <th>快递单号</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>2018-1-1</td>
                        <td>3000</td>
                        <td>增值税普通发票</td>
                        <td>2564569522366</td>
                        <td>已开票</td>
                        <td>顺丰快递</td>
                        <td>955923654</td>
                    </tr>
                    <tr>
                        <td>2018-1-1</td>
                        <td>3000</td>
                        <td>增值税普通发票</td>
                        <td>2564569522366</td>
                        <td>已开票</td>
                        <td>顺丰快递</td>
                        <td>955923654</td>
                    </tr>
                    <tr>
                        <td>2018-1-1</td>
                        <td>3000</td>
                        <td>增值税普通发票</td>
                        <td>2564569522366</td>
                        <td>已开票</td>
                        <td>顺丰快递</td>
                        <td>955923654</td>
                    </tr>
                    <tr>
                        <td>2018-1-1</td>
                        <td>3000</td>
                        <td>增值税普通发票</td>
                        <td>2564569522366</td>
                        <td>已开票</td>
                        <td>顺丰快递</td>
                        <td>955923654</td>
                    </tr>
                    <tr>
                        <td>2018-1-1</td>
                        <td>3000</td>
                        <td>增值税普通发票</td>
                        <td>2564569522366</td>
                        <td>已开票</td>
                        <td>顺丰快递</td>
                        <td>955923654</td>
                    </tr>
                    </tbody>
                </table>
                <ul class="pagination">
                    <li><a href="#">&laquo;</a></li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">&raquo;</a></li>
                </ul>


               
                <div>
                </div>

            </div>

        </div>
    </div>


</section>


<!--js-->
<script src="${ctxFrontStatic }/libs/jquery/v1.12.4/jquery.min.js"></script>
<script src="${ctxFrontStatic }/libs/bootstrap/v3.3.7/js/bootstrap.js"></script>
<script src="${ctxFrontStatic }/libs/bootstrap-table/v1.11.0/bootstrap-table.js"></script>
<script src="${ctxFrontStatic }/libs/bootstrap-validator/js/bootstrapValidator.js"></script>
<script src="${ctxFrontStatic }/libs/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script src="${ctxFrontStatic }/libs/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${ctxFrontStatic }/libs/echarts/echarts.min.js"></script>
<script src="${ctxFrontStatic }/js/navbar.js"></script>

<script>
    $(function () {
        $('#datetimepicker-one').datetimepicker({
            language: 'zh-CN',
            format: 'yyyy-mm-dd',
            minView: 'month',
            autoclose: true,//选中关闭
            todayBtn: true//今日按钮
        });
    });
    //数据操作按钮点击变色
    //加载事件
    $('.flag').on('click', function () {
        $(this).css({
            'background-color': '#2e8ded',
            'color': '#fff'
        }).siblings().css({
            'background-color': '#fff',
            'color': 'black'
        });
    });



</script>
</body>
</html>